<template>
	<div class="homeSift">
		<div class="siftBar">
			<h3>购物精选</h3>
		</div>
		<div class="sift">
			<div class="sift-item" v-for="(item, index) in sifts" :key="index">
				<div>
					<a href=""><img :src="item.img" alt=""></a>
				</div>
				<div>{{item.name}}</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'HomeSift',
		data() {
			return {
				sifts: [{
						img: require('@/assets/png/home/sift/shangyi.png'),
						name: '上衣'
					},
					{
						img: require('@/assets/png/home/sift/qunzi.png'),
						name: '裙子'
					},
					{
						img: require('@/assets/png/home/sift/kuzi.png'),
						name: '裤子'
					},
					{
						img: require('@/assets/png/home/sift/taozhuang.jpg'),
						name: '套装'
					},
					{
						img: require('@/assets/png/home/sift/taozhuang.jpg'),
						name: '套装'
					},
				]
			}
		},
		methods: {

		}

	}
</script>

<style>
	.homeSift {
		margin-top: 10px;
		font-size: 14px;
		display: block;
		height: 100px;
		border-bottom: 3px solid #F6F6F6
	}

	.siftBar {
		height: 30px;
		padding-left: 15px;
		
	}

	.sift {
		display: flex;
		justify-content: space-around;
	}
	.sift-item {
		text-align: center;
		width: 100px;
	}

	.sift-item img {
		height: 40px;
		width: 40px;
		border-radius: 50%;
		border: 1px solid red;
		padding-top: 5px;
	}
</style>
